<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style>
		#box{
			width: 200px;
			height: 200px;
			border: 2px solid black;
		}
		p{
			/*height: 100px*/
			width: 100px;
			height: 20px;
			background: pink;
		}
		
	</style>

</head>
<body>
	<div id="box"></div>
	<p>gtg</p>
	<p>fdd</p>
	<p>haha</p>
	<p>hehe</p>
	<p>zizi</p>
	<div>ddd</div>
	<button></button>

	<!-- <p>haha</p> -->
	
</body>
</html>
<script src="jquery-3.3.1.min.js"></script>
<script>
	//parseFloat() 函数可解析一个字符串，并返回一个浮点数。
     //该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
	// $("#box").click(function(){
	// 	$(this).css({
	// 		width:function(index,value){
	// 			return parseFloat(value)*1.2;
	// 		},
	// 		height:function(index,value){
	// 			return parseFloat(value)*1.2;
	// 		}
	// 	});
	// });



     // var p = $("p:last");
     // var offset = p.offset();
     // p.html("left:" + offset.left + ", top:" + offset.top);


     //offset 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
     // $("p:last").offset({top:10,left:30});

     
      // var p = $("p:first");
      // var position = p.position();
      // $("p:last").html("left:" + position.left + ", top:" + position.top);
     
    // var p = $("p:first");
    // $("p:last").text("scrollTop:" + p.scrollTop());


  //获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。
  //获取第一段相对滚动条左侧的偏移  ????为什么显示的第二个p的位置（坐标代替了第二个p）
    // var p = $("p:first");
    // $("p:eq(2)").text("scrollLeft:" + p.scrollLeft());


   //demo是什么意思
    // $("div.demo").scrollLeft(300);

    // $("p:first").height(100);

     //height([val|fn])
    //以 10 像素的幅度增加 p 元素的高度
  //  $("button").click(function(){
  //   $("p").height(function(m,d){
  //   return d+10;
  //   });
  // });
   $("button").click(function(){
    $("p").width(function(n,c){
    return c+10;
    });
  });


   //innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

    // var p = $("p:first");
    // $("p:last").text("innerHeight:" + p.innerHeight());(
    
    //innerWidth() 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
     var p = $("p:first");
     $("p:last").text("innerWidth:" +  p.innerWidth());

     //outerHeight([options])获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
     //获取第一段落外部高度。
     //设置为 true 时，计算边距在内。
    /* var p = $("p:first");
     $("p:last").text("outerHeight:" + p.outerHeight() + ",outerHeight(true):" + p.outerHeight(true));

      var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );*/





</script>